<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js">

    </script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    
</head>
<body>
    <div id="div1">
        <!-- 使用 v -cloak 闪烁表达式问题 -->
        <h1 v-cloak>{{ id }}</h1>   
        <h4 v-text="id">????</h4>   
        <div v-html = "id2">wdwd</div>
        <!-- v-text 和 {{}} 
        区别 : v-text 没有闪烁问题  而且会覆盖文字    -->
        <!-- v-html 可以简析标贴 例子 :<h1>   会覆盖文字 -->
        
        <!-- v -bind  可以绑定属性 -->
        <input id="but2" type="button" value="按钮" v-bind:title="mytit" v-on:click='show'>
        <input id="but1" type="button" value="按钮" :title="mytit" @click='show'>
        <!-- 效果相同 -->

    </div>

    <script>
        var vm  = new Vue({
            el : "#div1",
            data :{
                id :"wdw?",
                id2 :"<h1>这是一个h1</h1>",
                mytit :"VUE",
                
            },
            methods: { // 定义方法
                show : function(){
                    alert("gun")
                }
            },
        })

        // document.getElementById("but1").onclick = function(){
        //     alert("GUN")
        // }

        // Vue 中提供绑定事件 v-on
        
    </script>
</body>
</html>